<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    姓名:<input type="text" class="username"/></br>
     年龄:<input type="text" class="age"/></br>
     <button>点击发送postajax</button>
     <script>
         var btn =document.querySelector("button");
         var usernameEle=document.querySelector(".username");
         var ageEle=document.querySelector(".age");
         // post 的区别 1.open的方式是 post  2. 发送数据通过send发送；(格式：name=zhangsan&age=20) 3.需要设置post请求头的格式；
		
		// 客户端    ----- 1.数据 2.请求头（request header） ---->            服务端
		// 服务端----  1.数据 2.返还头（response header）------> 客户端
        btn.onclick=function(){
            var username = usernameEle.value;
			var age  =ageEle.value;
            let xhr=new XMLHttpRequest();
            xhr.open("post","post.php",true);
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
            xhr.onload=function(){
                console.log(JSON.parse(xhr.responseText))

            }
            var date=`username=${username}&age=${age}`;
            xhr.send(date);
        }
     </script>
  </body>
</html>
